<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/ladder.css">
    <link rel="stylesheet" href="../css/ladder-formtemplate.css">
    <script src="../lib/ladder-skin.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        input[type='text']{
            width:100%
        }
        select{
            width: 250px;;
        }
        .js-hint{
            text-align: left;
            color: rosybrown;
            vertical-align: top;
            line-height: 30px;
            padding-left: 2px;;
        }

        .title{
            font-size: 20px;
            font-weight: bolder;
            margin: 3px auto;
            text-align: center;
            display: inline-block;
        }
        .files option{
            padding: 1px 4px;
            border-bottom: 1px dashed #ccc;
        }
        .genbtn{
            font-size: 20px;
            font-weight: bolder;
            width: 150px;
            height: 40px;
        }
        .addItem{
            margin: 3px 0 0 0;overflow: hidden;
        }
        .addItem input{
            height: 22px;
            width: 195px;margin: 0;outline: none
        }
        .addItem button{
            width: 40px;height: 24px;position: relative;left: -7px
        }
    </style>


</head>
<body>

<div id="main" layoutH="0" style="overflow:auto;">

    <table class="yui-form-tabletemplate" style="width: 650px;margin: 0 auto;border: 1px solid #ddd" id="formtable">
        <tbody>
            <tr>
                <td colspan="3" align="center">
                    <h1 class="title">基本页面生成器</h1>
                    <span style="font-size: 10px">&ensp;[驿枫2016]</span>
                </td>

            </tr>
            <tr>
                <th width="120px">文件名</th>
                <td width="250px" align="left"><input class="js-yui" type="text" data-bind="filename" data-valid="required"></td>
                <td class="js-hint">服务程序的绝对路径,{root}为项目路径</td>
            </tr>
            <tr>
                <th width="120px">动作器</th>
                <td width="250px" align="left"><input class="js-yui" data-bind="action" id="action" type="text"></td>
                <td class="js-hint">为空为全部</td>
            </tr>
            <tr>
                <th width="120px">查询模版名</th>
                <td width="250px" align="left"><input class="js-yui" type="text" data-bind="query" id="query"></td>
                <td class="js-hint">为空，只生成相应一种动作页</td>
            </tr>
            <tr>
                <th width="120px">保存模版名</th>
                <td width="250px" align="left"><input class="js-yui" type="text" data-bind="save" id="save" data-valid="required"></td>
                <td class="js-hint" >不能为空，必须table类型模版</td>
            </tr>
            <tr>
                <th width="120px">模版字段连接属性</th>
                <td width="250px" align="left"><input class="js-yui" placeholder="id,id" type="text" data-bind="pnames"></td>
                <td class="js-hint">前为保存模版属性,后为查询模版属性</td>
            </tr>
            <tr>
                <th width="120px">动作按钮生成</th>
                <td width="250px" align="left">
                    <select class="js-yui" data-bind="btnpos">
                        <option value="head">表格头顶部</option>
                        <option value="grid">表格操作列</option>
                    </select>
                </td>
                <td class="js-hint">按钮生成位置</td>
            </tr>
            <tr>
                <th width="120px">颜色皮肤</th>
                <td width="250px" align="left">
                    <select class="js-yui" data-bind="skin">
                        <option value="default" selected="selected">默认</option>
                        <option value="bootstrap">bootstrap</option>
                        <option value="black">酷黑</option>
                        <option value="blue">天蓝</option>
                        <option value="flat">扁平化</option>
                    </select>
                </td>
                <td class="js-hint">按钮生成位置</td>
            </tr>
            <tr>
                <th width="120px">类库相对位置</th>
                <td width="250px" align="left"><input class="js-yui" type="text" data-bind="libpath" id="libpath"></td>
                <td class="js-hint" >空默认，"../../lib/"</td>
            </tr>
            <tr>
                <th width="120px">css文件引用</th>
                <td width="250px" align="left">
                    <select size="10" style="height: 50px;" class="files js-yui" data-bind="css">
                        <option>ladder.css</option>
                        <option>ladder-datagrid.css</option>
                    </select>
                    <div class="addItem">
                        <input>
                        <button style="">添加</button>
                    </div>
                </td>
                <td class="js-hint" valign="top" style="vertical-align: top">不能完全保证生成的页面路径引用全部正确，请在页面生成之后进行确认</td>
            </tr>
            <tr>
                <th width="120px">js文件引用</th>
                <td width="250px" align="left">
                    <select size="10" style="height: 80px;" class="files js-yui" data-bind="js">
                        <option>ladder</option>
                        <option>laydate</option>
                        <option>require</option>
                    </select>
                    <div class="addItem">
                        <input>
                        <button>添加</button>
                    </div>
                </td>
                <td class="js-hint" valign="top" style="vertical-align: top">不能完全保证生成的页面路径引用全部正确，请在页面生成之后进行确认</td>
            </tr>
            <tr>
                <th width="120px">弹页的宽高</th>
                <td width="250px" align="left"><input type="text" class="js-yui" data-bind="wh" value="600,700" ></td>
                <td class="js-hint">前为保存模版属性,后为查询模版属性</td>
            </tr>
            <tr>

                <td colspan="3" align="center">
                    <button class="genbtn">生成</button>
                </td>
            </tr>
        </tbody>
    </table>

</div>



<script src='../lib/require.js'></script>
<script>
    require(['ladder-form','ladder-ui'],function(){
        var formframe=new YFLib.FormFrame(YFLib.ServerUrl+"/service/GenHtmlPage.aspx");
        var libpath=Ladder.getStore("libpath");
        $("#libpath").val((libpath=="false"|| !libpath)?"":libpath);
        var tableselect=new YFLib.TableCombox("#action",{
            data:["query","insert","update","delete"],
            title:"动作选项",
            multiSelect:true,
            width:$("#action").outerWidth()
        });
        var tableselect=new YFLib.TableCombox("#query",{
            queryUrl:URLS.QueryData,
            queryData:{tableName:"DataModel",condition:{columnString:"name,type"},psize:10},
            title:"动作选项",
            multiSelect:"only",
            width:$("#query").outerWidth(),
            readonly:false,
            queryform:[{title:"模版名",formname:"name"}]
        });
        var tableselect=new YFLib.TableCombox("#save",{
            queryUrl:URLS.QueryData,
            queryData:{tableName:"DataModel",condition:{columnString:"name,type",forms:{type:"table"}},psize:10},
            title:"动作选项",
            multiSelect:"only",
            readonly:false,
            width:$("#save").outerWidth(),
            queryform:[{title:"模版名",formname:"name"}]
        });

        $(".genbtn").click(function(){
            var bean =Ladder.Form.fetchFormValue("#formtable","data-bind");
            if(!bean)return;
            Ladder.setStore("libpath",$("#libpath").val());
            formframe.clear();
            formframe.setForm("settings",bean);
            formframe.submit();
        });


    });
</script>


</body>
</html>